<script setup lang="ts">
import type { MachineGroup } from '@/apis/model/group.ts'
import {
  deleteComputeMachineGroupApi,
  getComputeMachineGroupListApi,
  updateComputeMachineGroupStatusApi,
} from '@/apis/modules/group.ts'
import { commonTableProps } from '@/utils/table.ts'
import { Message } from '@arco-design/web-vue'
import EditDialog from '../components/EditDialog.vue'
import useConfig from './useConfig.ts'

const queryParams = ref({
  region_id: '',
  status: '',
  name: '',
  type: 1,
  limit: 500,
})

const {
  visible: dialogVisible,
  data: editDialogData,
  open: openEditDialog,
} = usePopup<MachineGroup>()
const { tableColumns, allRegionOptions } = useConfig()

const {
  data: tableData,
  loading,
  run,
} = useListRequest(getComputeMachineGroupListApi, {
  immediate: true,
  params: queryParams,
})

const { createSortChange } = useTable(run, tableData)
const onSorterChange = createSortChange(queryParams)

// 切换分组状态
const handleUpdateStatus = useConfirm<MachineGroup>(
  {
    title: '禁用分组',
    content:
      '确定要禁用分组吗？禁用后，新购分组关联的商品将创建资源失败，已购的商品可以正常使用。',
    okText: '禁用',
    width: 480,
    closable: false,
    immediate: (_, status) => {
      return status === 1
    },
  },
  async (record, status) => {
    await updateComputeMachineGroupStatusApi({
      ...record,
      status,
    })
    Message.success('操作成功')
  },
)

// 删除分组
const handleDelete = useConfirm<MachineGroup>(
  {
    title: '删除分组',
    content: '确定要删除分组吗？删除后，分组将无法恢复。',
    okText: '删除',
    width: 480,
    closable: false,
  },
  async (record) => {
    await deleteComputeMachineGroupApi({ id: record.id })
    await run()
    Message.success('删除成功')
  },
)
</script>

<template>
  <main-container
    :show-pagination="false"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <a-button
        type="primary"
        @click="openEditDialog()"
      >
        新建分组
      </a-button>
      <a-select
        v-model="queryParams.region_id"
        class="!w-160px"
        placeholder="全部区域"
        :options="[{ label: '全部区域', value: '' }, ...allRegionOptions]"
        @change="run()"
      />
      <a-select
        v-model="queryParams.status"
        class="!w-160px"
        placeholder="全部状态"
        :options="[
          { label: '全部状态', value: '' },
          { label: '启用', value: '1' },
          { label: '禁用', value: '2' },
        ]"
        @change="run()"
      />
      <a-input-search
        v-model="queryParams.name"
        class="!w-58"
        placeholder="请输入分组名称搜索"
        @change="run()"
      />
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
      @sorter-change="onSorterChange"
    >
      <template #status="{ record }">
        <a-switch
          v-model="record.status"
          size="small"
          :checked-value="1"
          :unchecked-value="2"
          :before-change="val => handleUpdateStatus(record, val)"
        />
      </template>
      <template #actions="{ record }">
        <a-link @click="openEditDialog(record)">
          <i-icons-edit size="14px" />
        </a-link>
        <a-link
          :disabled="record.status === E_SWITCH_STATUS.ENABLE"
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="14px" />
        </a-link>
      </template>
    </a-table>
  </main-container>

  <edit-dialog
    v-model="dialogVisible"
    :record="editDialogData"
    :type="1"
    @success="run"
  />
</template>
